<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-09 10:18:26
 * @Description: file content
-->
<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div class="barChart" ref="barChartRef"></div>
    <div class="title">{{ number + '%' }}</div>
  </div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
import icon from '@/assets/images/page2/line-icon.png'
let charts = null
const barChartRef = ref(null)
let number = ref(0)
const initChart = (data) => {
  number.value = data[0].value
  let yData = data.map((it) => it.name);
  let xData = data.map((it) => it.value);
  let remarks = data.map((it) => it.remark);
  let maxValue = Math.max(...xData);
  let salvProMax = [100];
  let option = {
    grid: {
      left: 1,
      top: 30,
      right: 1,
      bottom: 0,
      containLabel: false,
    },
    xAxis: {
      type: "value",
      show: false,
      max: 100,
    },
    yAxis: {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color: "#D0E6FE",
          fontSize: 14,
        },
        // 调整左侧文字的3个属性，缺一不可
        verticalAlign: "bottom",
        align: "top",
        //调整文字上右下左
        padding: [0, 0, 15, 15],
        formatter: function (name, idx) {
          return `${name} \t `;
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: yData,
    },
    series: [
      {
        type: "bar",
        barWidth: 4,
        zlevel: 2,
        showBackground: false,
        label: {
          show: false,
        },
        data: xData,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(45,240,255,0)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#3DB8F2", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
      },

      {
        zlevel: 3,
        type: "pictorialBar",
        data: xData,

        symbol: 'image://',
        symbolSize: [32, 32],
        symbolPosition: "end",
        symbolOffset: data[0].value > 90 ? [5, -2] : [15, -2],
        itemStyle: {
          color: "#fff",
          shadowColor: "#fff",
          shadowBlur: 10,
        },
      },
      {
        zlevel: 1,
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-160%",
        data: salvProMax,
        itemStyle: {
          color: "rgba(11, 69, 173, .5)",

        },
      },
    ],
  };

  if (!charts) {
    charts = echarts.init(barChartRef.value)
    charts.setOption(option)
  } else {
    charts.dispose()
    charts = echarts.init(barChartRef.value)
    charts.setOption(option)
  }
  window.addEventListener('resize', () => {
    if (charts) {
      charts.resize()
    }
  })
}

defineExpose({
  initChart
})
</script>

<style lang="scss" scoped>
.barChart {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: 100% 95%;

}

.title {
  right: 10px;
  top: 4px;
  position: absolute;
  font-family: AgencyFB-Bold;
  font-size: 1.0vh;
  text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
    0 0 14px rgba(2, 139, 255, 0.56);
}
</style>